<template>
  <!-- 年龄比例 -->
  <div class="echarts">
    <ECharts ref="EChartsRef" :option="option" :resize="true" />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, watch } from "vue";

import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";

const props = defineProps({
  // 数据
  accommodationStatData: {
    type: Object,
    default: () => { },
  },
});
const accommodationStatData = computed(() => {
  return props.accommodationStatData
})
const EChartsRef = ref()
watch(() => props.accommodationStatData, (newVal: any) => {
  nextTick(() => {
    option.value = {
      // backgroundColor: '#fff',
      tooltip: {
        trigger: 'item',
        formatter: '{b}:({d}%)',
      },
      legend: [
        {
          top: '20%',
          orient: 'vertical',
          right: '1%',
          itemWidth: 32,
          itemHeight: 16,
          itemGap: 10,
          textStyle: {
            color: '#fff',
            fontSize: 12,
            padding: [0, 0, 0, 3],
          },
          data: ['内宿生', '外宿生', '半宿生'],
        }],
      grid: {
        containLabel: true,
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '60%'],
          center: ['40%', '50%'],
          color: [
            '#4C67EB',
            '#00F6FF',
            '#FF549D',
          ],
          label: {
            position: 'outside',
            show: true,
            color: '#fff',
            fontSize: 16,
            formatter: function (params: any) {
              if (params.name !== '') {
                return params.percent + '%';
                // return params.value + '人' + params.percent + '%';
              }
            },
          },
          labelLine: {
            show: true,
            length2: 30,
            length: 10,
          },
          itemStyle: {
            normal: {
              // borderWidth: 2,
              // borderColor: '#fff',
            },
          },
          data: [
            { value: accommodationStatData.value?.sleepInsideNum || 0, name: '内宿生' },
            { value: accommodationStatData.value?.sleepOutsideNum || 0, name: '外宿生' },
            { value: accommodationStatData.value?.semiResidentNum || 0, name: '半宿生' },
          ],
        },
      ],
    }
  });
}, { immediate: true });
const option = ref<ECOption>({})
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
